<template>
	<view class="aboutme">
		<navbar></navbar>
		<textNavbar myprops="律师介绍"></textNavbar>
		<view class="aboutme-content">
			<van-cell-group>
			  <van-cell title="个人介绍">
				</van-cell>
			</van-cell-group>
			<view style="background-color: white;"><textarea placeholder="律师个人介绍" style="width: 90vw; height: 300rpx; border-bottom: solid 2rpx #e4e4e4; margin: 0 auto;"/></view>
			<van-cell-group>
				<van-cell center title="专业领域" is-link :value="displayedValues" @click="ClickHandler"/>
			</van-cell-group>
			<van-cell-group>
			  <van-cell title="收费标准">
				</van-cell>
			</van-cell-group>
			<view style="background-color: white;"><textarea placeholder="收费标准" style="width: 90vw; height: 300rpx; margin: 0 auto;"/></view>
		</view>
		<view class="content-btn">
			<van-button type="info" round block custom-style="font-size: 36rpx; background: #036faf;">提交</van-button>
		</view>
		<van-popup
		  :show="show"
		  position="bottom"
			closeable
			round
		  custom-style="height: 40%; background: #EDEDED;"
		  @close="CloseHandler">
			<view class="popup-view">
				<text>擅长专业领域, 最多可选择6个</text>
				<view class="popup-check">
					<uni-data-checkbox  mode="tag" max="6" multiple v-model="checkbox3" :localdata="hobby" @change="changehandler"></uni-data-checkbox>
				</view>
			</view>
		</van-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				checkbox3: [],
				checktext: [],
				hobby: [
					{
						text: '婚姻家庭',
						value: 0
					}, {
						text: '劳动纠纷',
						value: 1
					}, {
						text: '民间借贷',
						value: 2
					},
					{
						text: '交通事故',
						value: 3
					},
					{
						text: '工伤赔偿',
						value: 4
					},
					{
						text: '刑事犯罪',
						value: 5
					},
					{
						text: '公司企业',
						value: 6
					},
					{
						text: '遗嘱继承',
						value: 7
					},
					{
						text: '侵权赔偿',
						value: 8
					},
					{
						text: '合同纠纷',
						value: 9
					},
					{
						text: '房产纠纷',
						value: 10
					},
					{
						text: '拆迁安置',
						value: 11
					},
					{
						text: '抵押担保',
						value: 12
					},
					{
						text: '医患纠纷',
						value: 13
					},
					{
						text: '农村土地',
						value: 14
					},
					{
						text: '产品质量',
						value: 15
					},
					{
						text: '食品安全',
						value: 16
					},
					{
						text: '行政维权',
						value: 17
					},
					{
						text: '乡村邻里纠纷',
						value: 18
					},
					{
						text: '人身损害',
						value: 19
					},
					{
						text: '债权债务',
						value: 20
					},
					{
						text: '知识产权',
						value: 21
					},
					{
						text: '保险理赔',
						value: 22
					},
					{
						text: '消费者权益',
						value: 23
					},
					{
						text: '诉讼程序',
						value: 24
					},
				],
			}
		},
		methods: {
			ClickHandler () {
				this.show = true
			},
			CloseHandler () {
				this.show = false
			},
			changehandler (e) {
				this.checktext = e.detail.data
				console.log(this.checktext);
			}
		},
		computed: {
			displayedValues() {
				return this.checktext.map(item => item.text).join(' ');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.aboutme {
		background-color: #EDEDED;
		height: 100vh;
		width: 100vw;
	}
	.content-btn {
		width: 690rpx;
		height: 88rpx;
		margin: 40rpx auto;
	}
	
	.popup-view {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.popup-view > text {
		display: block;
		margin-top: 60rpx;
		font-size: 26rpx;
	}
	.popup-check {
		width: 90vw;
		height: 29vh;
		margin-top: 20rpx;
	}
	
	::v-deep.checklist-group {
		justify-content: center !important;
	}
	::v-deep.checklist-box.is--tag {
		margin-right: 10rpx !important;
		padding: 10rpx 12rpx !important;
		border-radius: 24rpx !important;
	}
	
	::v-deep.van-cell__value {
		color: black;
	}
</style>
